 /* 
            S  0.6%     15个
            A  5.1%     32个
            B  94.3%    13个
         */

 // 0~1000
 var fiveCount = 90; // 抽90次触发保底
 var fourCount = 10; // 抽10次触发保底
 var fiveBaodi = 0; // 五星保底的次数
 var fourBaodi = 0; // 四星保底的次数
 var extractCount = 0; // 抽卡的次数
 var fiveCardCount = 0; //五星卡的次数
 var fourCardCount = 0; //四星卡的次数
 var threeCardCount = 0; //三星卡的次数
 var fiveUp = 0; //抽中五星up的次数
 var fourUp = 0; //抽中四星up的次数
 var showStr = '';
 var show = document.querySelector('.show'); // 抽卡页面
 var ten = document.querySelectorAll('button')[1]; //十连
 var reset = document.querySelectorAll('button')[0]; //重置
 var count = document.querySelector('.count'); //抽卡次数
 var fiveTotal = document.querySelectorAll('.total')[0];
 var fourTotal = document.querySelectorAll('.total')[1];
 var threeTotal = document.querySelectorAll('.total')[2];

 var fiveTotalCount = fiveTotal.querySelectorAll('span')[0];
 var fiveTotalMinimum = fiveTotal.querySelectorAll('span')[1];
 var fiveTotalUp = fiveTotal.querySelectorAll('span')[2];

 var fourTotalCount = fourTotal.querySelectorAll('span')[0];
 var fourTotalMinimum = fourTotal.querySelectorAll('span')[1];
 var fourTotalUp = fourTotal.querySelectorAll('span')[2];

 var threeTotalCount = threeTotal.querySelectorAll('span')[0];
 var showFive = document.querySelector('.his-right'); //显示抽到的详情以及数量
 fiveStar = fiveStar.map(item => {
     return Object.assign(item, {
         count: 0
     })
 });
 fourStar = fourStar.map(item => {
     return Object.assign(item, {
         count: 0
     })
 });
 threeStar = threeStar.map(item => {
     return Object.assign(item, {
         count: 0
     })
 });
 // console.log(fiveStar);


 //函数抽奖封装

 function extract() {
     var div = document.createElement('div');
     var img = document.createElement('img');

     var arr = new Array(1000).fill().map((_, i) => i + 1);

     // console.log(arr);

     var newArr = arr.sort(function () {
         return Math.random() - 0.5;
     })
     // console.log(newArr);
     var random = Math.floor(Math.random() * 1000); //0~1000
     // console.log(newArr[random]);
     var currentNum = newArr[random];

     // 触发保底机制
     if (fiveCount == 1) {
         fiveBaodi++;
         currentNum = 1;
     }
     if (fourCount == 1) {
         fourBaodi++;
         currentNum = 7;
     }

     // 0.6%
     if (currentNum >= 1 && currentNum <= 6) {

         // 重置保底
         // 五星数回到90
         fiveCount = 90;
         // 四星数回到10
         fourCount = 10;
         // 五星卡次数+1
         fiveCardCount++;

         var randomSecond = Math.floor(Math.random() * fiveStar.length + 1);
         fiveStar.forEach(function (item) {
             if (randomSecond == item.cardId) {
                 item.count++;
                 // 渲染到show中
                 img.setAttribute('src', item.imgSrc);
                 img.setAttribute('ondragstart', "return false");
                 div.appendChild(img);
                 show.appendChild(div);
             }
         })

     }
     // 5.1%
     else if (currentNum >= 7 && currentNum <= 57) {

         // 五星保底数-1
         fiveCount--;
         // 四星数回到10
         fourCount = 10;
         //四星卡次数+1
         fourCardCount++;
         var randomSecond = Math.floor(Math.random() * fourStar.length + 1);
         fourStar.forEach(function (item) {
             if (randomSecond == item.cardId) {
                 item.count++;
                 // 渲染到show中
                 img.setAttribute('src', item.imgSrc);
                 img.setAttribute('ondragstart', "return false");
                 div.appendChild(img);
                 show.appendChild(div);
             }
         })

     }
     //94.3%
     else if (currentNum >= 58 && currentNum <= 1000) {

         // 五星保底数-1
         fiveCount--;
         fourCount--;
         // 三星卡次数+1
         threeCardCount++;
         var randomSecond = Math.floor(Math.random() * threeStar.length + 1);
         threeStar.forEach(function (item) {
             if (randomSecond == item.cardId) {
                 item.count++;
                 // 渲染到show中
                 img.setAttribute('src', item.imgSrc);
                 img.setAttribute('ondragstart', "return false");
                 div.appendChild(img);
                 show.appendChild(div);
             }
         })

     }
     extractCount++;
 }
 // 渲染文字
 function renderText() {
     count.innerHTML = '抽卡次数： ' + extractCount;
     fiveTotalCount.innerHTML = '总计：' + fiveCardCount;
     fourTotalCount.innerHTML = '总计：' + fourCardCount;
     threeTotalCount.innerHTML = '总计：' + threeCardCount;
     fiveTotalMinimum.innerHTML = '(保底' + fiveBaodi + ')';
     fourTotalMinimum.innerHTML = '(保底' + fourBaodi + ')';
     fiveTotalUp.innerHTML = 'up：' + fiveUp;
     fourTotalUp.innerHTML = 'up：' + fourUp;
 }

 // 渲染图片
 function renderPic() {
     showFive.innerHTML = '';

     Fivefilter = fiveStar.filter(function (item) {
         if (item.count > 0) {
             return item;
         }
     })
     Fourfilter = fourStar.filter(function (item) {
         if ((item.count > 0 && item.type == 'character')) {
             return item;
         }
     })
     // 渲染五星
     // console.log(Fivefilter);
     if (Fivefilter.length > 0) {
         for (var i = 0; i < Fivefilter.length; i++) {
             var div = document.createElement('div');
             div.innerHTML =
                 ` <div class="img-box"><img src="${Fivefilter[i].imgSrc}" alt="原神${Fivefilter[i].cardName}" ondragstart="return false"></div><p>${Fivefilter[i].cardName}</p><div class="num">${Fivefilter[i].count}</div>`;
             showFive.appendChild(div);
         }
     }
     // 渲染五星
     if (Fourfilter.length > 0) {
         for (var i = 0; i < Fourfilter.length; i++) {
             var div = document.createElement('div');
             div.innerHTML =
                 ` <div class="img-box"><img src="${Fourfilter[i].imgSrc}" alt="原神${Fourfilter[i].cardName}" ondragstart="return false"></div><p>${Fourfilter[i].cardName}</p><div class="num">${Fourfilter[i].count}</div>`;
             showFive.appendChild(div);
         }
     }

 }

 function timer(fn, num) {
     for (var i = 0; i < num; i++) {
         fn();
     }
 }
 // 十连
 ten.onclick = function () {
     show.innerHTML = '';
     timer(extract, 10);
     renderText();
     renderPic();
 };

 //重置
 reset.onclick = function () {
     show.innerHTML = '';
     extractCount = 0;
     fiveCardCount = 0;
     fourCardCount = 0;
     threeCardCount = 0;
     fiveBaodi = 0;
     fourBaodi = 0;
     fiveUp = 0;
     fourUp = 0;
     fiveCount = 90;
     fourCount = 90;
     renderText();
     fiveStar.map(function (obj) {
         obj.count = 0;
     });
     fourStar.map(function (obj) {
        obj.count = 0;
    });
     renderPic();

 }